﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://jspang.com/xmlrpc.php">

<title>React全家桶免费视频教程 &#8211; 技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Feed" href="http://jspang.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 评论Feed" href="http://jspang.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; React全家桶免费视频教程评论Feed" href="http://jspang.com/2017/10/22/react-all-01/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/jspang.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.2"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='slicknav-css'  href='style/css/slicknav.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-stylesheet-css'  href='style/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-responsive-css'  href='style/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.js'></script>
<script type='text/javascript' src='style/js/jquery-migrate.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jspang.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jspang.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='Webpack3.X版 成神之路 全网首发' href='http://jspang.com/2017/09/16/webpack3-2/' />
<meta name="generator" content="WordPress 4.8.2" />
<link rel="canonical" href="http://jspang.com/2017/10/22/react-all-01/" />
<link rel='shortlink' href='http://jspang.com/?p=2598' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F10%2F22%2Freact-all-01%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F10%2F22%2Freact-all-01%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style><script type="text/javascript">
(function(url){
	if(/(?:Chrome\/26\.0\.1410\.63 Safari\/537\.31|WordfenceTestMonBot)/.test(navigator.userAgent)){ return; }
	var addEvent = function(evt, handler) {
		if (window.addEventListener) {
			document.addEventListener(evt, handler, false);
		} else if (window.attachEvent) {
			document.attachEvent('on' + evt, handler);
		}
	};
	var removeEvent = function(evt, handler) {
		if (window.removeEventListener) {
			document.removeEventListener(evt, handler, false);
		} else if (window.detachEvent) {
			document.detachEvent('on' + evt, handler);
		}
	};
	var evts = 'contextmenu dblclick drag dragend dragenter dragleave dragover dragstart drop keydown keypress keyup mousedown mousemove mouseout mouseover mouseup mousewheel scroll'.split(' ');
	var logHuman = function() {
		var wfscr = document.createElement('script');
		wfscr.type = 'text/javascript';
		wfscr.async = true;
		wfscr.src = url + '&r=' + Math.random();
		(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(wfscr);
		for (var i = 0; i < evts.length; i++) {
			removeEvent(evts[i], logHuman);
		}
	};
	for (var i = 0; i < evts.length; i++) {
		addEvent(evts[i], logHuman);
	}
})('//jspang.com/?wordfence_lh=1&hid=91F36A3B1F636853EF9AF98E9AD9B180');
</script>		<style type="text/css" id="wp-custom-css">
			/*
您可以在此处加入您的CSS。

点击上方的帮助图标来了解更多。
*/
#page-links{
    margin: 20px 5px;
	color:#222;
    line-height: 33px;
}
#page-links a{ 
    display: inline-block;
    line-height: 20px;
    padding:3px 10px 3px 10px;
    border:1px solid #ccc;
}
.toc_list li{
  list-style:none;
}		</style>
	
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body class="post-template-default single single-post postid-2598 single-format-standard">


<header class="header">
	<div class="header-top text-center">

					<div class="text-logo">
				<a href="http://jspang.com/">技术胖-胜洪宇关注web前端技术</a>
				<p>前端免费视频第一博客。</p>
			</div><!-- /.text-logo -->
			</div><!-- /.header-top -->

	<nav class="main-menu">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="navigation-wrapper">
						<ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="top-menu"><li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1187"><a href="http://jspang.com/category/python%e9%85%92%e5%90%a7/">Python酒吧</a></li>
<li id="menu-item-1292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1292"><a href="http://blog.jspang.com">大胖逼逼叨</a></li>
<li id="menu-item-1189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1189"><a href="http://jspang.com/category/uncategorized/">读书笔记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
</ul>					</div>
					<div class="menu-mobile"></div>
				</div>
			</div>
		</div>
	</nav><!-- /.main-menu -->

</header><!-- /.header -->

<div class="container main-content">
	<div class="row">
		<div class="col-md-8">
			
				<article id="post-2598" class="post-2598 post type-post status-publish format-standard has-post-thumbnail hentry category-react tag-react">
            <!--
        <div class="thumbnails">
            <img width="360" height="300" src="style/images/react_1022.jpg" class="post-thumbnail img-responsive wp-post-image" alt="" srcset="http://jspang.com/wp-content/uploads/2017/10/react_1022.jpg 360w, http://jspang.com/wp-content/uploads/2017/10/react_1022-300x250.jpg 300w" sizes="(max-width: 360px) 100vw, 360px" />        </div>
        -->
    
    <div class="padding-content">
        <header class="entry-header">
            <h2 class="entry-title">React全家桶免费视频教程</h2>        </header> <!--/.entry-header -->
        
                <div class="entry-meta">
            		<ul class="list-inline">
			<li>
                <span class="author vcard">
                    By <a class="url fn n" href="http://jspang.com/author/jspang001/">技术胖</a>                </span>
			</li>

			<li>/</li>

			<li>
				<span class="posted-on"><time class="entry-date published" datetime="2017-10-22T15:02:31+00:00">2017年10月22日</time><time class="updated hidden" datetime="2017-10-30T19:20:57+00:00">2017年10月30日</time></span>
			</li>
		</ul>
		        </div><!-- .entry-meta -->
                        <div class="entry-content">
            <div id="toc_container" class="toc_wrap_right have_bullets"><p class="toc_title">目录</p><ul class="toc_list"><li><a href="#01create-react-app">第01节：构建：create-react-app 快速脚手架</a></li><li><a href="#02generator-react-webpack">第02节：构建：generator-react-webpack</a></li><li><a href="#03webpack01">第03节：构建：webpack一步一步构建01</a></li></ul></div>
<h3>文章前言:</h3>
<p>这套课程不是从零开始的，你需要React基础知识，在我的博客中是有写的，我会在前言最后给出链接。因为我还是一线分站的程序员，也经常加班，所以更新不会很快，但只少会保证一周三集的更新，免费视频可以在本网站提供观看。</p>
<p>博客采用<strong>图文教程+视频教程</strong>的形式:你可以先看视频，然后在使用时查询这篇文章，作为备忘笔记使用。文章中会讲解到一下内容：</p>
<ul>
<li>React环境构建：讲解用工具构建和webapck自行构建两种方法进行。</li>
<li>React路由：大概4-5节课，全面讲解react路由的知识。</li>
<li>Flux：flux的理念和数据流讲解。</li>
<li>Redux：准备4-5节课，讲解Redux的用法，让你能快速上手项目。</li>
</ul>
<p>学习教程前需要一定的React和webpack基础知识,可以学习下面这三篇文章：</p>
<ul>
<li><a href="http://jspang.com/2017/08/15/react_basic/">《React免费视频教程-入门和组件》</a></li>
<li><a href="http://jspang.com/2017/09/07/react002/">《React免费视频教程-表单的应用》</a></li>
<li><a href="http://jspang.com/2017/09/16/webpack3-2/">《webpack3.x版 成神之路》</a></li>
</ul>
<p><span style="color: #ff0000;">每周更新三节，大概11月中旬更新完毕。</span></p>
<h1><span id="01create-react-app">第01节：构建：create-react-app 快速脚手架</span></h1>
<p>很高兴又跟大家见面了，其实react项目的搭建在实际工作中是很简单的，因为FaceBook官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具create-react-app。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=g0566ytwh88&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>我们可以直接访问它的官网：<a href="https://github.com/facebookincubator/create-react-app">https://github.com/facebookincubator/create-react-app</a></p>
<h3>creat-react-app优点</h3>
<ul>
<li>无需配置：官方的配置堪称完美，几乎不用你再配置任何东西，就可以上手开发项目。</li>
<li>高集成性：集成了对React，JSX，ES6和Flow的支持。</li>
<li>自带服务：集成了开发服务器，你可以实现开发预览一体化。</li>
<li>热更新：保存自动更新，让你的开发更简单。</li>
<li>全兼容性：自动处理CSS的兼容问题，无需添加-webkit前缀。</li>
<li>自动发布：集成好了发布成品功能，编译后直接发布，并且包含了sourcemaps功能。</li>
</ul>
<h3>create-react-app的安装</h3>
<p>安装需要在命令行中进行,在安装create-react-app前，你需要安装node。然后在命令行中输入下面的命令：</p>
<p>windows系统下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763047342087477" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install -g create-react-app</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763047342087477-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763047342087477-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-v">create</span><span class="crayon-o">-</span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-v">app</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0007 seconds] -->
<p>Liunx和Mac电脑下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763057709677503" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
sudo npm install -g create-react-app</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763057709677503-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763057709677503-1"><span class="crayon-e">sudo </span><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-v">create</span><span class="crayon-o">-</span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-v">app</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p><span style="color: #ff0000;">这里的 -g 是全局安装的意思。</span></p>
<h3>创建React项目</h3>
<p>我们安装好create-react-app之后，就可以创建我们的React目录了，命令如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f714576305c348689730" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
create-react-app my-app</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f714576305c348689730-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f714576305c348689730-1"><span class="crayon-v">create</span><span class="crayon-o">-</span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-e">app </span><span class="crayon-v">my</span><span class="crayon-o">-</span><span class="crayon-v">app</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>这里是有个小坑的，就是你的目录名不要使用大写，这样作只要是为了严谨性，因为在Linux下是严格区分大小写的。</p>
<p><strong>启动服务</strong></p>
<p>直接在命令行中输入：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763063395336640" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm start</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763063395336640-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763063395336640-1"><span class="crayon-e">npm </span><span class="crayon-v">start</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0002 seconds] -->
<p><strong>总结：</strong>在实际开发中，你使用脚手架就是这么简单，并没有什么门槛。让我们在快速搭建开发环境，上手项目。所以说React的生态还是很庞大和完美的。记住：听懂不等于学会，一定要动手作一作。</p>
<h1><span id="02generator-react-webpack">第02节：构建：generator-react-webpack</span></h1>
<p>react的生态圈非常庞大，第三方的构建工具也有很多种，这节课介绍一个在业内比较流行的构建工具generator-react-webpack，它是需要yeoman的支持的。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=a0566j2nt71&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>优点介绍：</h3>
<ul>
<li>基于webpack构建，可以很容易的配置自己需要的webpack。</li>
<li>支持ES6，集成了Babel-Loader。</li>
<li>支持不同风格的CSS（sass，less，stylus）。</li>
<li>支持PostCSS转换样式。</li>
<li>集成了esLint功能。</li>
<li>可以轻松配置单元测试，比如Karma和Mocha</li>
</ul>
<h3>安装</h3>
<p>安装还是在命令行用npm进行安装，不过在全局安装generator-react-webpack之前，你可以先安装yeoman。命令如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f714576306d445735849" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install -g yo
npm install -g generator-react-webpack</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f714576306d445735849-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576306d445735849-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f714576306d445735849-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-e">yo</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576306d445735849-2"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-v">generator</span><span class="crayon-o">-</span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-v">webpack</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0006 seconds] -->
<p></p>
<h3>创建目录</h3>
<p>我们先用命令自行创建一个文件：new-react-demo</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763076487115184" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
mkdir new-react-demo</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763076487115184-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763076487115184-1"><span class="crayon-e">mkdir </span><span class="crayon-r">new</span><span class="crayon-o">-</span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-v">demo</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>进入这个文件夹</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f714576307b330029577" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
cd new-react-demo</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f714576307b330029577-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f714576307b330029577-1"><span class="crayon-e">cd </span><span class="crayon-r">new</span><span class="crayon-o">-</span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-v">demo</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>用生成器生成我们的项目目录</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763080976046297" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
yo react-webpack</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763080976046297-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763080976046297-1"><span class="crayon-e">yo </span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-v">webpack</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>用npm start就可以查看效果了。</p>
<p>我们在视频中还讲解了目录结构，让你更好的掌握generator-react-webpack.</p>
<p><strong>总结：</strong>generator-react-webpack更容易配置webpack，让你适应你的实际项目，并且有很强的扩展功能。一般我们团队都会使用这个脚手架来生产react的目录结构，但也有缺点，就是要依靠yeoman来生成。</p>
<h1><span id="03webpack01">第03节：构建：webpack一步一步构建01</span></h1>
<p>如果你对webpack很精通，完全可以自己随心所欲的用webpack自己构建一个React的开发环境,这节从头开始自己构建一个简单的React开发环境。学习这节课前，你要会基本的webpack的开发。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=g0567kd5vai&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>安装webpack</h3>
<p>在安装webpack之前，我们先建立一个文件夹并进入，当然你可以用其他方法，我这里就用命令了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763086256550092" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
mkdir react-webpack
cd react-webpack</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763086256550092-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f7145763086256550092-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763086256550092-1"><span class="crayon-e">mkdir </span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-e">webpack</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f7145763086256550092-2"><span class="crayon-e">cd </span><span class="crayon-v">react</span><span class="crayon-o">-</span><span class="crayon-v">webpack</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>进入文件夹后对我们的webpack项目进行<strong>初始化</strong>，命令如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f714576308b077122788" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm init</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f714576308b077122788-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f714576308b077122788-1"><span class="crayon-e">npm </span><span class="crayon-v">init</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>初始化成功后可以在项目根目录下看到package.json文件。如果你一路按回车感觉有些麻烦，你可以直接加一个-y参数，这样npm就直接给我们生成了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763090715363980" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm init -y</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763090715363980-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763090715363980-1"><span class="crayon-e">npm </span><span class="crayon-v">init</span><span class="crayon-h"> </span><span class="crayon-o">-</span><span class="crayon-v">y</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0003 seconds] -->
<p>package.json文件建立好以后，你可以安装webpack了</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f7145763095091202353" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
npm install --save-dev webpack</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f7145763095091202353-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f7145763095091202353-1"><span class="crayon-e">npm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">webpack</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0004 seconds] -->
<p>建议使用cnpm来进行安装，这样速度会快很多。安装好后，你会在package.json里看到你安装的版本号。这样我们webpack就安装好了。</p>
<h3>配置webpack.config.js</h3>
<p>在项目根目录建立webpack.config.js文件，这个文件是进行webpack配置的，先建立基本的入口和出口文件。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f714576309a713597328" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var path =require('path');
module.exports = {
    //入口文件
    entry:'./app/index.js',
    //出口文件
    output:{
        filename:'index.js',
        path:path.resolve(__dirname,'dist')
    }
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f714576309a713597328-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309a713597328-2">2</div><div class="crayon-num" data-line="crayon-59f714576309a713597328-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309a713597328-4">4</div><div class="crayon-num" data-line="crayon-59f714576309a713597328-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309a713597328-6">6</div><div class="crayon-num" data-line="crayon-59f714576309a713597328-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309a713597328-8">8</div><div class="crayon-num" data-line="crayon-59f714576309a713597328-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309a713597328-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f714576309a713597328-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">path</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-e">require</span><span class="crayon-sy">(</span><span class="crayon-s">'path'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309a713597328-2"><span class="crayon-v">module</span><span class="crayon-sy">.</span><span class="crayon-v">exports</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f714576309a713597328-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//入口文件</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309a713597328-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">entry</span><span class="crayon-o">:</span><span class="crayon-s">'./app/index.js'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f714576309a713597328-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-c">//出口文件</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309a713597328-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f714576309a713597328-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">'index.js'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309a713597328-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f714576309a713597328-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309a713597328-10"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0016 seconds] -->
<p>上边的代码只定义了入口文件和出口文件，如果你对这些还看不懂，那请学习我的<a href="http://jspang.com/2017/09/16/webpack3-2/">《webpack3.x版 成神之路》 </a>。文件配置好后，我们要根据文件的结构改造我们的项目目录，我们在根目录下新建<strong>app和dist</strong>文件夹，然后进入app文件夹，新建一个index.js文件。</p>
<p><strong>新建index.html文件</strong></p>
<p>在根目录新建index.html文件，并引入webpack设置中的出口文件，代码如下。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f714576309f871582525" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React全家桶-jspang&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    
&lt;/body&gt;
&lt;!--引入出口文件--&gt;
&lt;script src="./dist/index.js"&gt;&lt;/script&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f714576309f871582525-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309f871582525-2">2</div><div class="crayon-num" data-line="crayon-59f714576309f871582525-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309f871582525-4">4</div><div class="crayon-num" data-line="crayon-59f714576309f871582525-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309f871582525-6">6</div><div class="crayon-num" data-line="crayon-59f714576309f871582525-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309f871582525-8">8</div><div class="crayon-num" data-line="crayon-59f714576309f871582525-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309f871582525-10">10</div><div class="crayon-num" data-line="crayon-59f714576309f871582525-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309f871582525-12">12</div><div class="crayon-num" data-line="crayon-59f714576309f871582525-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f714576309f871582525-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f714576309f871582525-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309f871582525-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f714576309f871582525-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309f871582525-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f714576309f871582525-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309f871582525-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f714576309f871582525-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React全家桶-jspang</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309f871582525-8"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f714576309f871582525-9"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309f871582525-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line" id="crayon-59f714576309f871582525-11"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309f871582525-12"><span class="crayon-c">&lt;!--引入出口文件--&gt;</span></div><div class="crayon-line" id="crayon-59f714576309f871582525-13"><span class="crayon-i "><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./dist/index.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f714576309f871582525-14"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0046 seconds] -->
<p></p>
<h3>测试webpack配置</h3>
<p>通过上面的步骤，配置好了wbpack，现在可以测试一下我们webpack配置是否有问题。在路口文件中写入下面的代码，并进行打包测试。</p>
<p><strong>/app/index.js文件</strong></p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71457630a5570914398" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
function component(){
    var element = document.createElement('div');
    element.innerHTML = ('Hello JSPang');
    return element;
}

document.body.appendChild(component());</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71457630a5570914398-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630a5570914398-2">2</div><div class="crayon-num" data-line="crayon-59f71457630a5570914398-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630a5570914398-4">4</div><div class="crayon-num" data-line="crayon-59f71457630a5570914398-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630a5570914398-6">6</div><div class="crayon-num" data-line="crayon-59f71457630a5570914398-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71457630a5570914398-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">component</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630a5570914398-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">element</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-e">createElement</span><span class="crayon-sy">(</span><span class="crayon-s">'div'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71457630a5570914398-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-v">innerHTML</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-s">'Hello JSPang'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630a5570914398-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-v">element</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71457630a5570914398-5"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630a5570914398-6">&nbsp;</div><div class="crayon-line" id="crayon-59f71457630a5570914398-7"><span class="crayon-v">document</span><span class="crayon-sy">.</span><span class="crayon-v">body</span><span class="crayon-sy">.</span><span class="crayon-e">appendChild</span><span class="crayon-sy">(</span><span class="crayon-e">component</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0014 seconds] -->
<p>这段代码非常简单，不作过多的解释。如果你对这个代码看不懂，再去啃两边犀牛或者红宝书。</p>
<p><strong>加入打包命令</strong></p>
<p>打开package.json文件，在scripts属性中加入build命令。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71457630aa593713825" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
"scripts": {
    "build": "webpack"
  },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71457630aa593713825-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630aa593713825-2">2</div><div class="crayon-num" data-line="crayon-59f71457630aa593713825-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71457630aa593713825-1"><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630aa593713825-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"webpack"</span></div><div class="crayon-line" id="crayon-59f71457630aa593713825-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>在终端中输入npm run build ，就可以看到打包结果了。如果没有出现错误，在浏览器中打开，可以看到我们的编写结果。到这部为止，我们正确安装了webpack，并进行了出入口的配置，也看到了webpack的输出结果。</p>
<h3>开发服务器配置</h3>
<p>你会很容易的发现，我们现在缺少一个实时更新的服务，那动手马上配置一个。</p>
<p>在命令行安装webpack-dev-server,在终端中输入下面的命令。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71457630af360060304" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
cnpm install --save-dev webpack-dev-server</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71457630af360060304-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71457630af360060304-1"><span class="crayon-e">cnpm </span><span class="crayon-v">install</span><span class="crayon-h"> </span><span class="crayon-o">--</span><span class="crayon-v">save</span><span class="crayon-o">-</span><span class="crayon-e">dev </span><span class="crayon-v">webpack</span><span class="crayon-o">-</span><span class="crayon-v">dev</span><span class="crayon-o">-</span><span class="crayon-v">server</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>安装完成后，配置webpack.config.js文件。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71457630b4307542468" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
devServer:{
    contentBase:'./',
    host:'localhost',
    compress:true,
    port:1717
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71457630b4307542468-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630b4307542468-2">2</div><div class="crayon-num" data-line="crayon-59f71457630b4307542468-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630b4307542468-4">4</div><div class="crayon-num" data-line="crayon-59f71457630b4307542468-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630b4307542468-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71457630b4307542468-1"><span class="crayon-v">devServer</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630b4307542468-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">contentBase</span><span class="crayon-o">:</span><span class="crayon-s">'./'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71457630b4307542468-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">host</span><span class="crayon-o">:</span><span class="crayon-s">'localhost'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630b4307542468-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">compress</span><span class="crayon-o">:</span><span class="crayon-t">true</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71457630b4307542468-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">port</span><span class="crayon-o">:</span><span class="crayon-cn">1717</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630b4307542468-6"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0009 seconds] -->
<p>配置好后再packeage.json里增加一个scripts命令，我们起名叫server。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71457630b8266312609" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 "scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open"
  },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71457630b8266312609-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630b8266312609-2">2</div><div class="crayon-num" data-line="crayon-59f71457630b8266312609-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630b8266312609-4">4</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71457630b8266312609-1"><span class="crayon-h"> </span><span class="crayon-s">"scripts"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630b8266312609-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"build"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"webpack"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71457630b8266312609-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-s">"server"</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-s">"webpack-dev-server --open"</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630b8266312609-4"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>这里的&#8211;open是直接打开浏览器的意思。这些都配置完成后，就可以在终端输入npm run server 看到结果了。</p>
<p><strong>自动刷新浏览器</strong></p>
<p>在我们修改代码时，现在并不能自动刷新浏览器，不会立即呈现我们编写的代码结果，而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:&#8217;temp/&#8217;,然后在index.html引入JS时写这个temp地址就可以实时预览了。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71457630be700146629" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'temp/'
},</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71457630be700146629-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630be700146629-2">2</div><div class="crayon-num" data-line="crayon-59f71457630be700146629-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71457630be700146629-4">4</div><div class="crayon-num" data-line="crayon-59f71457630be700146629-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71457630be700146629-1"><span class="crayon-v">output</span><span class="crayon-o">:</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630be700146629-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">filename</span><span class="crayon-o">:</span><span class="crayon-s">'index.js'</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71457630be700146629-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">path</span><span class="crayon-o">:</span><span class="crayon-v">path</span><span class="crayon-sy">.</span><span class="crayon-e">resolve</span><span class="crayon-sy">(</span><span class="crayon-v">__dirname</span><span class="crayon-sy">,</span><span class="crayon-s">'dist'</span><span class="crayon-sy">)</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71457630be700146629-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">publicPath</span><span class="crayon-o">:</span><span class="crayon-s">'temp/'</span></div><div class="crayon-line" id="crayon-59f71457630be700146629-5"><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0010 seconds] -->
<p>index.html文件引入JS</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71457630c3557724321" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;script src="./temp/index.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71457630c3557724321-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71457630c3557724321-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./temp/index.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0005 seconds] -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>总结：</strong>这节课主要是先设置好webpack的基本配置，这些配置其实在以前的课程中都已经讲过，但是我们还是需要重新配置一遍，因为如果你不配置，你下面的课程将没办法继续操作。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
        <div class="gave" >
            <a href="javascript:;" id="gave">打赏</a>
            <div class="code" id="wechatCode" style="display: none">
                <img src="style/images/20170518151055111.png" alt="微信扫一扫支付">
                <div><img src="style/images/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div>
            </div>
        </div>        </div> <!-- //.entry-content -->
               <br>
        <div class="entry-tags text-left">标签：<a href="http://jspang.com/tag/react/" rel="tag">React</a></div>
    </div>

</article><!-- #post-## -->                              
				<div class="user-profile media">
    <div class="pull-left author-avater">
        <img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-110.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=220&amp;d=mm&amp;r=g 2x' class='avatar avatar-110 photo' height='110' width='110' />    </div>
    <div class="media-body">
        <div class="profile-heading">
            <h3><a href="http://jspang.com/author/jspang001/" title="由技术胖发布" rel="author">技术胖</a></h3>
        </div>
        <div class="website-link">http://jspang.com</div>
        <div class="author-description">
                    </div>
    </div>
</div><!-- .user-profile -->                               
				
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">文章导航</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://jspang.com/2017/09/16/webpack3-2/" rel="prev"><i class="fa fa-angle-left"></i> Previous Post</a></div></div>
	</nav>
									<div class="comment-box">
						<div id="comments" class="comments-area comments">
            <h3 class="common-title comments-title">
            11 Comments        </h3>

        <ul class="comment-list">

            			<li class="comment even thread-even depth-1" id="li-comment-751">
				<div id="comment-751" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/6a4a6d3442ca25b560e2c9a4a368614d-75.jpg' srcset='http://0.gravatar.com/avatar/6a4a6d3442ca25b560e2c9a4a368614d?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://rewafang.cn' rel='external nofollow' class='url'>Rewa-Fang</a></h3>							<span class="comment-date">2017年10月22日</span>
						</div>

						
						<div class="comment-content">
							<p>厉害了  我的胖!  出教程和速度比我学的还要快!  感谢胖哥的付出&#8230;..</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=751#respond' onclick='return addComment.moveForm( "comment-751", "751", "respond", "2598" )' aria-label='回复给Rewa-Fang'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-752">
				<div id="comment-752" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年10月22日</span>
						</div>

						
						<div class="comment-content">
							<p>也谢谢你一直一来的支持。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=752#respond' onclick='return addComment.moveForm( "comment-752", "752", "respond", "2598" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-753">
				<div id="comment-753" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/0bf78d7917932c6a3e6deeea1757fafe-75.jpg' srcset='http://0.gravatar.com/avatar/0bf78d7917932c6a3e6deeea1757fafe?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Great</h3>							<span class="comment-date">2017年10月22日</span>
						</div>

						
						<div class="comment-content">
							<p>今天无意间看到你vue视频，讲的真的很好，谢谢你技术胖，给我印象很深刻，会跟随您视频好好学习，谢谢您的付出，感谢您！！！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=753#respond' onclick='return addComment.moveForm( "comment-753", "753", "respond", "2598" )' aria-label='回复给Great'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-754">
				<div id="comment-754" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/30fcebb189d8abd4e6e2031a58147359-75.jpg' srcset='http://0.gravatar.com/avatar/30fcebb189d8abd4e6e2031a58147359?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">CNU</h3>							<span class="comment-date">2017年10月23日</span>
						</div>

						
						<div class="comment-content">
							<p>技术胖，腻害腻害。教程很期待！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=754#respond' onclick='return addComment.moveForm( "comment-754", "754", "respond", "2598" )' aria-label='回复给CNU'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-762">
				<div id="comment-762" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年10月23日</span>
						</div>

						
						<div class="comment-content">
							<p>谢谢支持。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=762#respond' onclick='return addComment.moveForm( "comment-762", "762", "respond", "2598" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-757">
				<div id="comment-757" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/7e2cfc87fdf9404cfaa937671a02c63b-75.jpg' srcset='http://1.gravatar.com/avatar/7e2cfc87fdf9404cfaa937671a02c63b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">barry</h3>							<span class="comment-date">2017年10月23日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，这套视频大概好久出完？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=757#respond' onclick='return addComment.moveForm( "comment-757", "757", "respond", "2598" )' aria-label='回复给barry'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-758">
				<div id="comment-758" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f6266fc77198a003621ee3c94997fea2-75.jpg' srcset='http://0.gravatar.com/avatar/f6266fc77198a003621ee3c94997fea2?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">homefrank</h3>							<span class="comment-date">2017年10月23日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥。这套视频还收费不？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=758#respond' onclick='return addComment.moveForm( "comment-758", "758", "respond", "2598" )' aria-label='回复给homefrank'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-766">
				<div id="comment-766" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/8096496054db48a0394d0b680fb5438f-75.jpg' srcset='http://2.gravatar.com/avatar/8096496054db48a0394d0b680fb5438f?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">榭安</h3>							<span class="comment-date">2017年10月24日</span>
						</div>

						
						<div class="comment-content">
							<p>厉害了 技术胖  支持支持</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=766#respond' onclick='return addComment.moveForm( "comment-766", "766", "respond", "2598" )' aria-label='回复给榭安'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-770">
				<div id="comment-770" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/1300e37dd20b0d6fced04f8f37268b9b-75.jpg' srcset='http://1.gravatar.com/avatar/1300e37dd20b0d6fced04f8f37268b9b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">永不止息</h3>							<span class="comment-date">2017年10月25日</span>
						</div>

						
						<div class="comment-content">
							<p>请问能不能多出点实战教程，因为这种基础知识视频很多，但实战视频很少</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=770#respond' onclick='return addComment.moveForm( "comment-770", "770", "respond", "2598" )' aria-label='回复给永不止息'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-771">
				<div id="comment-771" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/fec02dec46891ab71dbc24c4b22976fc-75.jpg' srcset='http://0.gravatar.com/avatar/fec02dec46891ab71dbc24c4b22976fc?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">meteor</h3>							<span class="comment-date">2017年10月25日</span>
						</div>

						
						<div class="comment-content">
							<p>等待ing&#8230;&#8230;..</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=771#respond' onclick='return addComment.moveForm( "comment-771", "771", "respond", "2598" )' aria-label='回复给meteor'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-784">
				<div id="comment-784" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/26d50219b2dcc02a30ecbf005e5a389b-75.jpg' srcset='http://2.gravatar.com/avatar/26d50219b2dcc02a30ecbf005e5a389b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">bazinga</h3>							<span class="comment-date">2017年10月30日</span>
						</div>

						
						<div class="comment-content">
							<p>永远支持你，胖哥！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/10/22/react-all-01/?replytocom=784#respond' onclick='return addComment.moveForm( "comment-784", "784", "respond", "2598" )' aria-label='回复给bazinga'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
        </ul><!-- .comment-list -->

        
        
    
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/10/22/react-all-01/#respond" style="display:none;">取消回复</a></small></h3>			<form action="http://jspang.com/wp-comments-post.php" method="post" id="commentform" class="comment-form row">
				<div class="clearfix"></div><div class="col-md-12"><textarea id="comment" placeholder="Write your comment..." name="comment" aria-required="true"></textarea></div><div class="col-md-4"><input id="author" name="author" type="text" placeholder="Name *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="email" name="email" type="text" placeholder="Email *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="url" name="url" type="text" placeholder="Website" value="" size="30"/></div>
<p class="aiowps-captcha"><label for="aiowps-captcha-answer">请输入数字答案:</label><div class="aiowps-captcha-equation"><strong>2 &#215; 5 = <input type="hidden" name="aiowps-captcha-string-info" id="aiowps-captcha-string-info" value="q22f92bspj" /><input type="hidden" name="aiowps-captcha-temp-string" id="aiowps-captcha-temp-string" value="1509364823" /><input type="text" size="2" id="aiowps-captcha-answer" name="aiowps-captcha-answer" value="" autocomplete="off" /></strong></div></p><p class="form-submit col-md-12"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='2598' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="2b2f55731b" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="215"/></p>			</form>
			</div><!-- #respond -->
	</div>					</div>
				
			
					</div>

		<div class="col-md-4">
    <div class="primary-sidebar widget-area" role="complementary">
        <aside id="aster_about_base_widget-2" class="widget widget_aster_about_base_widget"><h1 class="widget-title text-uppercase">博主介绍</h1>			
			<div class="about-widget">
			
						
						<div class="about-me-content">技术胖：10年一线互联网程序开发经验（仍在一线奋战），做过J2EE、PHP和前端，现在主要关注前端领域。每年帮助50万以上前端爱好者学习。 除一线程序员外，博主还有以下身份，但只在装逼时使用。 掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院知名讲师，百度传课前端讲师。</div>
				
			
			</div>
			
		</aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" action="http://jspang.com/">
    <div class="aster-search-form">
		<input type="text" placeholder="Search and hit enter&hellip;" value="" name="s" id="s" />
	 </div>
</form></aside><aside id="text-2" class="widget widget_text"><h1 class="widget-title text-uppercase">公告</h1>			<div class="textwidget"><div></div>
<div style="color: #f44336; font-weight: blod;">广告事宜请联系：QQ：454275609</p>
<hr />
<p><strong>QQ群1：364140450(满)</strong></p>
</div>
<div style="color: #f44336; font-weight: blod;"><strong>QQ群2：524520566（600人）</strong></div>
<div style="color: #f44336; font-weight: blod;">进群和2000多名前端关注者一起进步，<br />
我每周都会上线解答群内问题。</div>
<hr />
<ul>
<li>《webpack3.x 成神之路》更新完成。</li>
<li>开始更新《React全家桶》教程，每周三节，请小伙伴关注。</li>
<li>在看视频课程中，如果有疑问，可以发邮件给技术胖。邮件地址：web0432@126.com ,技术胖会在下班后给你回复邮件，解决你的问题。</li>
</ul>
</div>
		</aside><aside id="text-6" class="widget widget_text"><h1 class="widget-title text-uppercase">如果文章对您有帮助，请打赏：</h1>			<div class="textwidget"><p>						<style>
				
					#tab_container_1817 {
				overflow:hidden;
				display:block;
				width:100%;
				border:0px solid #ddd;
				margin-bottom:30px;
				}

#tab_container_1817 .tab-content{
		padding:20px;
		border: 1px solid #e6e6e6 !important;
		margin-top: 0px;
		background-color:#ffffff !important;
		color: #000000 !important;
		font-size:16px !important;
		font-family: Open Sans !important;
		
				border: 1px solid #e6e6e6 !important;
		}
#tab_container_1817 .wpsm_nav-tabs {
    border-bottom: 0px solid #ddd;
}
#tab_container_1817 .wpsm_nav-tabs > li.active > a, #tab_container_1817 .wpsm_nav-tabs > li.active > a:hover, #tab_container_1817 .wpsm_nav-tabs > li.active > a:focus {
	color: #000000 !important;
	cursor: default;
	background-color: #ffffff !important;
	border: 1px solid #e6e6e6 !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a {
    margin-right: 0px !important; 
    line-height: 1.42857143 !important;
    border: 1px solid #d50000 !important;
    border-radius: 0px 0px 0 0 !important; 
	background-color: #e80606 !important;
	color: #000000 !important;
	padding: 15px 18px 15px 18px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	text-align:center !important;
	font-family: Open Sans !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:focus {
outline: 0px !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:before {
	display:none !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:after {
	display:none !important ;
}
#tab_container_1817 .wpsm_nav-tabs > li{
padding:0px !important ;
margin:0px;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:hover , #tab_container_1817 .wpsm_nav-tabs > li > a:focus {
    color: #000000 !important;
    background-color: #e80606 !important;
	border: 1px solid #d50000 !important;
	
}
#tab_container_1817 .wpsm_nav-tabs > li > a .fa{

margin-right:5px !important;

margin-left:5px !important;


}

		#tab_container_1817 .wpsm_nav-tabs a{
			background-image: url(style/images/img/style-noise.png);
			background-position: 0 0;
			background-repeat: repeat-x;
			}
			


#tab_container_1817 .wpsm_nav-tabs > li {
    float: left;
    margin-bottom: -1px !important;
	margin-right:0px !important; 
}


#tab_container_1817 .tab-content{
overflow:hidden !important;
}


@media (min-width: 769px) {

	#tab_container_1817 .wpsm_nav-tabs > li{
	float:left !important ;
		margin-right:-1px !important;
			}
	#tab_container_1817 .wpsm_nav-tabs{
	float:none !important;
	margin:0px !important;
	}

	/* Margin CSS FOR Horizontal */
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}

}



@media (max-width: 768px) {
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}
}


.wpsm_nav-tabs li:before{
display:none !important;
}

@media (max-width: 768px) {
		
		.wpsm_nav-tabs{
		margin-left:0px !important;
		margin-right:0px !important; 
		
	}
		#tab_container_1817 .wpsm_nav-tabs > li{
		float:none !important;
	}
		
	
}
				</style>
				<div id="tab_container_1817" >
	 
					<ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_1817">
							
							<li role="presentation"  class="active"  >
								<a href="#tabs_desc_1817_1" aria-controls="tabs_desc_1817_1" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏5元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_2" aria-controls="tabs_desc_1817_2" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏15元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_3" aria-controls="tabs_desc_1817_3" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏29元</span>
											
																						
																				
										
									
								</a>
							</li>
											 </ul>

					  <!-- Tab panes -->
					  <div class="tab-content" id="tab-content_1817">
												 <div role="tabpanel" class="tab-pane  in active " id="tabs_desc_1817_1">
								<img src="style/images/weixin05.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_2">
								<img src="style/images/weixin15.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_3">
								<img src="style/images/weixin29.jpg" width="100%" " class="alignnone size-medium" />						 </div>
							
					 </div>
					 
				 </div>
 <script>
		jQuery(function () {
			jQuery('#myTab_1817 a:first').tab('show')
		});
		
				jQuery(function(){
			var b="fadeIn";
			var c;
			var a;
			d(jQuery("#myTab_1817 a"),jQuery("#tab-content_1817"));function d(e,f,g){
				e.click(function(i){
					i.preventDefault();
					jQuery(this).tab("show");
					var h=jQuery(this).data("easein");
					if(c){c.removeClass(a);}
					if(h){f.find("div.active").addClass("animated "+h);a=h;}
					else{if(g){f.find("div.active").addClass("animated "+g);a=g;}else{f.find("div.active").addClass("animated "+b);a=b;}}c=f.find("div.active");
				});
			}
		});
			</script>
				
			<br />
<span style="color: red;">打赏后你将获得以下特权：</span></p>
<p>1.加入技术胖前端微信交流群。<br />
2.收听《前端成神软技能》语音分享版。<br />
3.和10年程序老司机（技术胖）成为微信好友。<br />
4.获得本站前端视频离线高清版。</p>
<hr />
<p><span style="color: red;">打赏后获得特权流程：</span><br />
1.扫二维码添加技术胖私人微信。<br />
<img src="style/images/232323121111111111.jpg" width="50%" /></p>
<p>2.添加微信成功后，发送打赏截图。</p>
<p>3.技术胖拉你入群，查看群公告。</p>
</div>
		</aside><aside id="text-8" class="widget widget_text"><h1 class="widget-title text-uppercase">视频教程</h1>			<div class="textwidget"><p>最新视频</p>
<ol>
<li><a href="http://jspang.com/2017/06/03/es6/" rel="bookmark">技术胖带你玩转ES6视频教程</a></li>
</ol>
<p>Vue视频合集-<small>可按此顺序学习</small></p>
<ol>
<li><a href="http://jspang.com/2017/02/23/vue2_01/" rel="bookmark">【第一季】VUE2.0内部指令(共8集)</a></li>
<li><a href="http://jspang.com/2017/03/14/vue2_02/" rel="bookmark">【第二季】VUE2.0全局API(共9集)</a></li>
<li><a href="http://jspang.com/2017/03/26/vue3/" rel="bookmark">【第三季】VUE2.0选项（共6集）</a></li>
<li><a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0实例内置组件（共4集）</a></li>
<li><a href="http://jspang.com/2017/04/10/vue-cli/" rel="bookmark">技术胖的VUE-CLI 视频教程</a></li>
<li><a href="http://jspang.com/2017/04/13/vue-router/" rel="bookmark">技术胖的VUE-ROUTER视频教程</a></li>
<li><a href="http://jspang.com/2017/05/03/vuex/" rel="bookmark">技术胖的VUEX视频教程</a></li>
<li><a href="http://jspang.com/2017/05/22/vuedemo/" rel="bookmark">VUE实战视频-快餐店收银系统</a></li>
</ol>
<hr />
<p>CocosCreator视频（前端游戏制作）</p>
<ol>
<li><a href="http://jspang.com/category/learn/jichu/">CC基础视频教程</a></li>
<li><a href="http://jspang.com/category/learn/shizhan/">CC实战-勇闯地下室</a></li>
</ol>
<hr />
<p>其它视频</p>
<ol>
<li><a href="http://jspang.com/2016/11/24/webpack/">Webpack基础视频</a></li>
<li><a href="http://jspang.com/2017/01/11/fabricjsbasic/" rel="bookmark">步入FABRIC.JS 中文视频教程</a></li>
</ol>
</div>
		</aside><aside id="text-5" class="widget widget_text"><h1 class="widget-title text-uppercase">捐赠墙</h1>			<div class="textwidget">
<hr/>
<div>以下人员在服务器购买费用中捐款，所以本站由以下人员共同建立。2017年5月22日重新上线。</div>
<div style="color:#f44336;border-bottom:1px solid #e0e0e0;padding:10px 0px;" >土豪榜</div>
<div>
高丽-59元，
周老六-147元，
风飞沙-118元
</div>
<div  style="color:#f44336;border-bottom:1px solid #e0e0e0;;padding:10px 0px;">真情铁粉</div>
<div>
婷婷-19元，
fillter-29元，
军哥哥-29元，
贪吃鱼儿-29元，
妖妖-29元，
追风-48元，
吴思超-29元，
金秀学-29元，
十月弓虽-29元，
谭兵-29元，
千夜一夕-29元，
jason-29元，
上帝没给答案-19元，
土豆-19元，
Tempest-29元，
馥镬-29，
詹小云-19元，
hasaki-29元，
落_尘-29元，
汪胜强-29元，
ginway-29元，
吕檀溪-29元，
Arical-29元，
lishalom-29元，
桂玉青-19元，
张杨-19元，
Peach-29元，
国豪-19元，
Kevin-29元，
孟凡兴-29元，
谢启鸿-19元，
bwhite-29元，
null-29元，
yuyi_guo-19元，
张易得-29元，
Rewa-Fang-29元，
小钟-29元，
木白-29元，
jackyrong-19元，
咚咚-29元，
笑容-29元，
vanjon-29元，
一曲琴殇-19元，
橙橙同学-29元，
王畅-19元，
咚咚-29元，
野蛮的橘子-29元，
路道老粗-29元，
建豪-29元

</div>
</div>
		</aside>    </div>
</div>

	</div>
</div>

<footer id="footer">
	<div class="copy-right-text text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyright &copy; 2017 <a href="http://jspang.com/" rel="home">技术胖-胜洪宇关注web前端技术</a>. All rights reserved.<br>Powered by <a href="http://jspang.com">jspang.com</a>.备案号 <a href="http://icp.chinaz.com/info?q=jspang.com">吉ICP备11005377号-3</a></p>
				</div>
			</div>
		</div>
	</div><!-- /Copyright Text -->
</footer><!-- /#Footer -->


<div class="scroll-up">
    <a href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll Up -->

<link rel='stylesheet' id='wechat-reward-css'  href='style/css/wechat-reward.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"2598"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/smoothscroll.js'></script>
<script type='text/javascript' src='style/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='style/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='style/js/imagesloaded.min.js'></script>
<script type='text/javascript' src='style/js/masonry.min.js'></script>
<script type='text/javascript' src='style/js/jquery.masonry.min.js'></script>
<script type='text/javascript' src='style/js/scripts.js'></script>
<script type='text/javascript' src='style/js/comment-reply.min.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
<script type='text/javascript' src='style/js/wechat-reward.js'></script>
<script type='text/javascript' src='style/js/form.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    
</body>
</html>

<!-- Dynamic page generated in 1.366 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-10-30 20:00:23 -->

<!-- Compression = gzip -->